<template>
  <!-- 专题精选 -->
  <div class="topicList">
    <div class="topicListwenzi">专题精选</div>

    <van-swipe :loop="false" :width="300" :show-indicators="false">
      <van-swipe-item v-for="item in topicList" :key="item.id">
        <img v-lazy="item.scene_pic_url" alt="" />
        <div class="titleprice">
            <p class="p1">{{item.title}}</p>
            <p class="p2">{{item.price_info|filterPrice}}</p>
        </div>
        <p class="p3">{{item.subtitle}}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: ["topicList"],
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
.topicList {
  margin: 0.2rem 0;
  padding: 0 0.08rem;
  background-color: #fff;
  font-family: "黑体";
  .topicListwenzi {
      text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
  }
  img {
    width: 97%;
    height: 2rem;
  }
  .titleprice{
      width: 2.7rem;
    display: flex;
    line-height: .4rem;
    font-size: .16rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
  }
  .p1{
      margin-right: .1rem;
  }
  .p2{
    color: #8B0000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
  }
  .p3{
      white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    padding-bottom: .1rem;
  }
}
</style>